<template>
	<div>
		<van-tabs v-model="tabActive" animated @change="toggleTab" color="#3498db">
		  <van-tab
				v-for="(item,index) in tabTitle"
				:key="index"
				:title="item"
			>
			<template v-if="orderListData.length">
				<div v-for="(item,index) in orderListData" :key="index">
					<order-list 
						:item="item" 
						:isOperation="true"
						@confirm="confirm_order(item,index)"
						@remove="remove_order(item,index)"
					>
						<order-card 
							v-for="(card,i) in item.data"
							:key="i"
							:card="card" 
						/>
					</order-list>
				</div>
			</template>
			<van-empty description="没有查询到订单" v-else />
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	import orderList from '@/components/orderlist.vue'
	import orderCard from '@/components/ordercard.vue'
	import { 
		getOrder,
		receive,
		removeOrder
	 } from '@/api/order.js'
	export default {
		data () {
			return {
				tabActive: 0, //tab默认下标
				tabTitle: ['全部','进行中','已完成'],
				orderListData: []
			}
		},
		created() {
			this._getOrder()
		},
		methods: {
			// 获取我的订单
			_getOrder() {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({name:'Login'})
				// 加载
				this.$toast.loading({
					message: '加载中···',
					forbidClick: true
				})
				// 发起请求
				getOrder({
					tokenString,
					status: this.tabActive
				})
				.then(({data:res}) => {
					console.log('我的订单',res)
					if (res.code !== 70000) return this.$toast.fail('请求异常,请重新尝试!')
					
					let orderData = []
					
					// 遍历数据
					res.result.forEach((item,index) => {
						// 遍历判断相同订单号
						for (let i = 0; i < orderData.length; i++) {
						  if (orderData[i].oid == item.oid) {
						    orderData[i].data.push(item)
						    orderData[i].count += item.count
						    orderData[i].total += item.count * item.price 
						    return
						  }
						}
						let o = {}
						o.oid = item.oid
						o.count = item.count  
						o.total = item.count * item.price 
						o.status = item.status
						o.date = item.createdAt
						o.data = [item]
						orderData.push(o)
					})
					// 取反数据
					this.orderListData = orderData.reverse()
					console.log('处理后的数据',this.orderListData)
					this.$toast.clear()
				})
				.catch(err => {
						this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 切换 tab
			toggleTab() {
				this._getOrder()
			},
			// 确定收货
			async confirm_order(item,index) {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 提示框
				const resultConfirm = await this.$dialog.confirm({
					message: '确定收货?'
				}).catch(err => err)
				if (resultConfirm !== 'confirm') return this.$toast('取消收货')
				// 加载中
				this.$toast.loading({
					message: '收货中···',
				  forbidClick: true
				})
				// 发起请求
				receive({
					tokenString,
					oid: item.oid
				})
				.then(({data: res}) => {
					console.log('确认收货',res)
					if (res.code !== 80000) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.msg)
					// 删除数组某一项
					if (this.tabActive === 1) return this.orderListData.splice(index, 1)
					// 状态改为已完成
					item.status = 2
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
				
			},
			// 移除订单
			async remove_order(item,index) {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 提示框
				const resultConfirm = await this.$dialog.confirm({
					message: '确定删除订单?'
				}).catch(err => err)
				if (resultConfirm !== 'confirm') return this.$toast('取消删除')
				// 加载中
				this.$toast.loading({
					message: '删除中···',
				  forbidClick: true
				})
				removeOrder({
					tokenString,
					oid: item.oid
				})
				.then(({data: res}) => {
					console.log('删除订单',res)
					if (res.code !== 90000) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.msg)
					// 删除数组某一项
					this.orderListData.splice(index, 1)
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			}
		},
		components: {
			orderList,
			orderCard
		}
	}
</script>

<style scoped>

</style>